<template>
  <div class="a-flex" :class="className" :style="{
      flexDirection: props.vertical ? 'column' : 'row',
      flexWrap: props.wrap,
      justifyContent: props.justify,
      alignItems: props.align,
      gap: props.gap,
      ...props.style
    }">
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from "vue"

interface FlexProps {
  style?: object,
  vertical?: boolean // flex 主轴的方向是否垂直，使用 flex-direction: column
  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse' | 'inherit' | 'initial' | 'revert' | 'unset' // 设置元素单行显示还是多行显示
  justify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' |'space-evenly', // 设置元素在主轴方向上的对齐方式
  align?: 'flex-start' | 'center' | 'flex-end' // 设置元素在交叉轴方向上的对齐方式
  gap?: 'small' | 'middle' | 'large' | 'string' | number // 设置网格之间的间隙
  className?: string
}

const props = defineProps<FlexProps>()

</script>

<style lang="scss" scoped>
.a-flex {
  display: flex;
  width: auto;
}
</style>